<template>
  <div class="content">
    <div class="title">用户详情</div>
    <div class="user-content">
      <div class="list">
        <div>姓名</div>
        <div class="list-item">
          {{ userData.name }}
        </div>
      </div>
      <div class="list">
        <div>手机号</div>
        <div class="list-item">
          {{ userData.phone }}
        </div>
      </div>
      <div class="list">
        <div>邮箱</div>
        <div class="list-item">
          {{ userData.email }}
        </div>
      </div>
      <div class="list">
        <div>职位</div>
        <div class="list-item">
          {{ userData.position }}
        </div>
      </div>
      <div class="list">
        <div>企业名称</div>
        <div class="list-item">
          {{ userData.companyName }}
        </div>
      </div>

      <div class="list">
        <div>注册时间</div>
        <div class="list-item">
          {{ userData.createTime | formatDate }}
        </div>
      </div>
      <div class="list">
        <div>注册来源</div>
        <div class="list-item">
          {{ channelFormatter[userData.channel] }}
        </div>
      </div>
      <div class="list">
        <div>审核状态</div>
        <div class="list-item">
          {{ auditFormatter[userData.audit] }}
        </div>
      </div>
      <div class="list">
        <div>专属业务员</div>
        <div class="list-item">
          {{ userData.businessAdminName }}
          <span
            class="edit-btn"
            @click="editAdmin"
            v-has="'system:user:userModule:edit'"
            >编辑</span
          >
        </div>
      </div>
    </div>
    <div class="title">套餐信息</div>
    <div class="user-content" style="background-color: #fff">
      <div class="tc-style">
        当前套餐：{{ userData.currentPlanName }}

        <el-button
          v-has="'system:user:userModule:edit'"
          v-if="userData.isTrial != 1&&userData.currentPlanId==1"
          class="btn"
          type="primary"
          size="mini"
          @click="tryClick"
          >试用套餐</el-button
        >
      </div>

      <div
        v-if="userData.isTrial == 1"
        class="tc-style"
        style="margin-left: 100px"
      >
        试用套餐：{{ userData.trialPlanName }}
        <span
          class="edit-btn"
          @click="editClick"
          v-has="'system:user:userModule:edit'"
          >编辑</span
        >
      </div>
      <div
        v-if="userData.isTrial == 1"
        class="tc-style"
        style="margin-left: 100px"
      >
        试用有效期：{{ userData.startTime }}至{{
          userData.endTime
        }}
      </div>
    </div>
    <div class="title">行为记录</div>
    <el-date-picker
      @change="getRecordList(recordTime)"
      class="dataPicker"
      v-model="recordTime"
      type="date"
      placeholder="选择时间"
      value-format="yyyy-MM-dd"
    >
    </el-date-picker>
    <div class="tableBox" ref="tableBoxRef" style="margin-top: 20px">
      <el-table
        :header-cell-style="{
          background: '#F8F8F8',
          color: '#333',
          fontSize: '16px',
          fontWeight: '700',
        }"
        border
        :data="recordDataList"
        style="width: 100%"
      >
        <el-table-column prop="moduleName" align="center" label="模块">
        </el-table-column>
        <el-table-column prop="usedTime" align="center" label="使用次数">
        </el-table-column>
        
        <el-table-column
          v-if="showEdit"
          prop="leftTime"
          align="center"
          label="剩余次数"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.limitType != 3">{{ scope.row.leftTime }}</span
            >{{ plansFormatter[scope.row.limitType]
            }}<span
              class="edit-btn"
              @click="editRecordClick(scope.row)"
              v-has="'system:user:userModule:edit'"
              >编辑</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :close-on-click-modal="false" 
    :append-to-body='true'
      title="编辑业务员"
      :visible.sync="editdialogVisible"
      width="480px"
      class="addEditRoleDialog"
    >
      <div>
        <div style="margin-bottom: 20px">业务员*</div>
        <el-select filterable 
          clearable
          v-model="businessAdminId"
          placeholder="请选择专属业务员"
          size="mini"
          style="width: 400px"
        >
          <el-option
            v-for="item in salesmansList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="editdialogVisible = false"
          >取 消</el-button
        >
        <el-button
          v-clickForbidden
          size="mini"
          type="primary"
          @click="saveywyEditClick"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" 
      :title="setMealTitle"
      :visible.sync="setMealDialogVisible"
      width="550px"
      class="addEditRoleDialog"
    >
      <div>
        <div style="margin-bottom: 20px">选择套餐*</div>
        <el-select filterable 
          clearable
          v-model="setMealData.currentPlanId"
          placeholder="请选择套餐"
          size="mini"
          style="width: 100%"
        >
          <el-option
            v-for="item in plans"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <div style="margin: 20px 0">试用有效时间*</div>
        <el-date-picker
          size="mini"
          class="dataPicker"
          v-model="setMealData.startTime"
          type="date"
          placeholder="日期(默认当天0点)"
          value-format="yyyy-MM-dd"
         
        >
        </el-date-picker>
        <span style="color: #d9d9d9; margin: 0 28px">至</span>

        <el-date-picker
          size="mini"
          class="dataPicker"
          v-model="setMealData.endTime"
          type="date"
          placeholder="日期(默认当天23:59:59)"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions1"
         
        >
        </el-date-picker>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="setMealclose">取 消</el-button>
        <el-button
          v-clickForbidden
          size="mini"
          type="primary"
          @click="savetcEditClick"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" 
      title="编辑剩余次数"
      :visible.sync="recordDialogVisible"
      width="500px"
      class="addEditRoleDialog"
    >
      <div>
        <div>模块名称</div>
        <el-input
          style="width: 100%"
          :disabled="true"
          size="mini"
          v-model="recordData.moduleName"
          placeholder="请输入模块名称"
          class="model-style"
        ></el-input>

        <div class="model-style">定价</div>
        <div>
          <div>
            <el-select filterable 
              :disabled="true"
              style="width: 100%"
              class="model-style"
              clearable
              v-model="recordData.limitType"
              size="mini"
            >
              <el-option
                v-for="item in dictList.module_limit_type"
                 :key="item.v"
                 :label="item.v"
                :value="item.k"
              >
              </el-option>
            </el-select>
          </div>
          <div v-if='recordData.limitType!=3'>
            <el-input
              size="mini"
              v-model="recordData.leftTime"
              class="model-style"
            ></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="recordDialogVisible = false"
          >取 消</el-button
        >
        <el-button
          v-clickForbidden
          size="mini"
          type="primary"
          @click="recordEditModelClick"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      typeOption: [
        { value: 1, label: "次/天" },
        { value: 2, label: "次" },
        { value: 3, label: "无限" },
      ],
      plansFormatter: {
        1: "次/天",
        2: "次",
        3: "无限",
      },
      recordData: {},
      recordDialogVisible: false,
      recordTime: "",
      setMealDialogVisible: false,
      setMealTitle: "申请试用",
      editdialogVisible: false,
      channelFormatter: {
        0: "",
        1: "pc",
        2: "小程序",
      },
      auditFormatter: {
        0: "待审核",
        1: "审核通过",
        2: "审核拒绝",
      },
      userData: {},
      salesmansList: [],
      businessAdminId: "",
      id: "",
      setMealData: {
        currentPlanId: "",
        startTime: "",
        endTime: "",
      },
      typeData: [],
      plans: [],
      recordDataList: [],
      showEdit: false,
      pickerOptions1: {
        disabledDate: (time) => {
          let beginDateVal = new Date(this.setMealData.startTime).getTime()
          if (beginDateVal) { // 等于的时候是临界值00:00:00
            return (time.getTime()) <= beginDateVal - 8.64e7
          } else {
            return time.getTime() < Date.now() - 8.64e7 
          }
        }
      }
    };
  },
   computed: {
    ...mapGetters(["dictList"]),
  },
  methods: {
    recordEditModelClick() {
        this.$api.editRecord(this.recordData).then((res) => {
        if (res.data.code == "00000") {
            this.$message.success("编辑剩余次数成功");
            this.recordTime = this.$moment().format("YYYY-MM-DD");
            this.getRecordList();
            this.recordDialogVisible=false
        }
      });
    },
    editRecordClick(row) {
      console.log(row);
      this.recordDialogVisible = true;
      this.recordData = row;
    },
    editClick() {
      this.getSetMeal();
      this.setMealTitle = "编辑";
      this.setMealDialogVisible = true;
      this.setMealData.currentPlanId = this.userData.trialPlanId;
      this.setMealData.startTime = this.userData.startTime.replace("T", " ");
      this.setMealData.endTime = this.userData.endTime.replace("T", " ");
       
    },
    setMealclose() {
      this.setMealDialogVisible = false;
      this.setMealData = {
        currentPlanId: "",
        startTime: "",
        endTime: "",
      };
    },
    tryClick() {
      this.setMealTitle = "申请试用";
      this.getSetMeal();
      this.setMealDialogVisible = true;
    },
    getSetMeal() {
      this.$api.getPlanModuleList().then((response) => {
        this.plans = JSON.parse(JSON.stringify(response.data.result.plans));
        this.plans = this.plans.filter((item) => item.id !== 1);
        
      });
       
    },
    editAdmin() {
      this.businessAdminId = this.userData.businessAdminId;
      this.editdialogVisible = true;
    },
    saveywyEditClick() {
      if(this.businessAdminId==''||this.businessAdminId==null){
        return this.$message.warning("请选择业务员");
      }else{
         this.$api
        .editywy({
          businessAdminId: this.businessAdminId,
          id: this.id,
        })
        .then((response) => {
          if (response.data.code == "00000") {
            this.$message.success("编辑业务员成功");
            this.editdialogVisible = false;
            this.getUserDetail(this.id);
          }
        });
      }
     
    },
    savetcEditClick() {
      let done =true
      if(this.setMealData.currentPlanId==''){
        done=false
       return this.$message.warning("请选择套餐");
      }
      if((this.setMealData.startTime==''||this.setMealData.startTime==null)||(this.setMealData.endTime==''||this.setMealData.endTime==null)){
        done=false
       return this.$message.warning("请选择试用时间");
      }
     this.setMealData.startTime = this.setMealData.startTime.replace("T", " ");
     this.setMealData.endTime = this.setMealData.endTime.replace("T", " ");
      
      if(done){
         this.$api
        .edittc({
          ...this.setMealData,
          userId: this.id,
        })
        .then((response) => {
          if (response.data.code == "00000") {
            this.$message.success("编辑成功");
            this.setMealDialogVisible = false;
            this.getUserDetail(this.id);
            this.getRecordList();
            this.setMealData = {
              currentPlanId: "",
              startTime: "",
              endTime: "",
            };
          }
        });
      }
     
    },
    getSalesmans() {
      this.$api.getSalesmans().then((res) => {
        if (res.data.code == "00000") {
          this.salesmansList = res.data.result;
        }
      });
    },
    getUserDetail(id) {
      this.$api.userDetail(id).then((res) => {
        if (res.data.code == "00000") {
          this.userData = res.data.result;
        }
      });
    },
    getTypeList() {
      this.$api.getType().then((res) => {
        if (res.data.code == "00000") {
          this.typeData = res.data.result;
        }
      });
    },
    getRecordList(date) {
      if (date) {
        this.date = date;
        if (date == this.$moment().format("YYYY-MM-DD")) {
          this.showEdit = true;
        } else {
          this.showEdit = false;
        }
      } else {
        this.date = this.$moment().format("YYYY-MM-DD");
        this.showEdit = true;
      }

      this.$api
        .userRecord({
          id: this.id,
          date: this.date,
        })
        .then((res) => {
          if (res.data.code == "00000") {
            this.recordDataList = res.data.result;
          }
        });
    },
  },
  created() {
    this.recordTime = this.$moment().format("YYYY-MM-DD");
    this.id = this.$route.query.id;
    this.getSalesmans();
    this.getTypeList();
    this.getRecordList();
    this.getUserDetail(this.id);
  },
};
</script>
<style lang="scss" scoped>
.content {
  padding: 20px;
  .title {
    margin-top: 20px;
    font-size: 18px;
    margin-bottom: 20px;
    padding-left: 5px;
    border-left: 5px solid #3783f2;
  }
  .user-content {
    background-color: #f2f2f2;
    display: flex;
    padding: 20px;
    flex-wrap: wrap;

    .list {
      flex: 0 0 20%;
      .list-item {
        margin-top: 10px;
        font-size: 14px;
      }
    }
    .list:nth-child(n + 6) {
      margin-top: 20px;
    }
  }
}
.edit-btn {
  margin-left: 10px;
  color: #409eff;
  cursor: pointer;
}
.tc-style {
  display: flex;
  align-items: center;
  .btn {
    margin-left: 20px;
  }
}
.model-style {
  margin-top: 10px;
}
</style>
